<template>
  <div style="width: 100%;background-color: #fff;box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.3);">
    <header class="header">
      <div class="logo" @click="openFirst">
        <img src="../../../static/login/blickICON.png" alt="">
        <!-- <span>船来船网</span> -->
      </div>
      <nav class="nav">
        <ul>
          <li><a href="/product">企业与产品</a></li>
          <li><a href="/Dashboard">排行与指数</a></li>
          <li><a href="/custom">服务与定制</a></li>
        </ul>
      </nav>
      <div class="user-actions">
        <img src="../../../static/login/user.png" />
        <span v-if="type == 0"><a href="/newLogin">登录</a> | <a style="padding-left: 8px;" href="#"> 注册</a>
        </span>
        <el-dropdown v-if="type == 1"  @command="handleCommand">
          <div  href="">采购商会员中心</div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="e">个人中心</el-dropdown-item>
            <el-dropdown-item  command="f">我的收藏</el-dropdown-item>
            <el-dropdown-item  command="c">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
       

        <el-dropdown v-if="type == 2"  @command="handleCommand">
          <div v-if="type == 2" >供应商会员中心</div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item  command="b">我的收藏</el-dropdown-item>
            <el-dropdown-item  command="c">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        
        <!-- <a class="ext_tui" v-if="type!==0" @click="exitFunc">退出</a> -->

        <i class="heart-icon"></i>
        <!-- <i class="menu-icon"  @click="toggleMobileMenu">
          <img src="../../../static/login/sc.png"/>
        </i> -->
      </div>
      <!-- <ul class="mobile-menu" v-if="isMobile && isMobileMenuOpen">
        <li><a href="#">展示搜索</a></li>
        <li><a href="#">排行指数</a></li>
        <li><a href="#">免费流程</a></li>
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
      </ul> -->
    </header>


    <!-- 支付弹窗 -->
    <!-- <newPayment></newPayment> -->

  </div>
</template>

<script>
import { mapState } from 'vuex';
import gundong from './gundong.vue'
import newPayment from '../../../views/engineering5188/newPage/newSupplier/compayPage/newPayment.vue';
export default {
  name: "new-page-header",
  components: {
    newPayment,
    gundong
  },

  data() {
    return {
      type: 0
    };
  },
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  watch: {},

  created() {

    if (this.userInfo.type == undefined) {
      this.type = 0
    } else {
      this.type = this.userInfo.type
    }


  },

  methods: {
    handleCommand(command) {
       switch (command) {
        case 'a':
          this.$router.push('/supplierIndex/SupplierPersonal');
          break; 
        case 'b':
           this.$router.push('/supplierIndex/SupplierCollect');
          break;
        case 'c':
          this.exitFunc();
          break;
        case 'e':
          this.$router.push('/prefecturePage/indexFirst');
          break;
        case 'f':
          this.$router.push('/prefecturePage/newCollect');
          break;
       }
      },
    openFirst() {
      this.$router.push('/')
    },
    exitFunc(){
      this.$store.commit("clear_loginInfo");
      alertSucc("已退出登录");
      localStorage.removeItem('userInfo');
      localStorage.removeItem('token');
      this.type=0;
      window.location.replace(window.location.origin+'/product');
    }
    // toggleMobileMenu(){

    // }
  },
};
</script>

<style scoped lang="less">
.ext_tui {
  cursor: pointer;
}

body {
  font-family: Arial, sans-serif;
}

// .menu-icon{
//     padding-left: 40px;
//   }
.header {
  width: 1700px;
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 20px 50px;
  background-color: white;
  margin: auto;
}

.logo {
  padding-left: 100px;

}

.logo img {
  width: 205px;
  height: 70px;
  cursor: pointer;
}

.nav ul {
  list-style: none;
  display: flex;
}

.nav ul li {
  font-family: PingFang SC, PingFang SC;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  font-style: normal;
  text-transform: none;
  margin-right: 77px;
}

.nav ul li a {
  text-decoration: none;
  color: #333;
}

.user-actions {
  display: flex;
  align-items: center;
  padding-left: 110px;
}

.user-actions img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.user-actions a {
  text-decoration: none;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-style: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-right: 8px;
}

.heart-icon {
  font-size: 20px;
  cursor: pointer;
}
</style>